<template>
  <view class="team-container">
    <view class="header-container">
      <view class="right-bg"></view>
      <view class="search-container">
        <view class="team-tab">
          <view
            @click="changeDate('1')"
            class="team-tab-item"
            :class="{
              'active-item': searchForm.dateType === '1'
            }">今日数据</view>
          <view
            @click="changeDate('2')"
            class="team-tab-item"
            :class="{
              'active-item': searchForm.dateType === '2'
            }">昨日数据</view>
          <view
            @click="changeDate('all')"
            class="team-tab-item all"
            :class="{
              'active-item': searchForm.dateType === 'all'
            }">全部</view>
        </view>
        <view class="sort text-overflow" @click="showSort = true">
          <text>{{ searchForm.sortType == 1 ? '按注册时间排序' : '按贡献佣金排序' }}</text>
          <u-icon class="arrow-down" name="arrow-down" color="#333" size="24"></u-icon>
        </view>
      </view>
      <view class="data-container">
        <view class="data-item">
          <view class="data-num">{{ totalMember || 0 }}</view>
          <view class="data-name">新增团员</view>
        </view>
        <view class="data-item">
          <view class="data-num">{{ taotalEarning || 0 }}</view>
          <view class="data-name">团队总收益</view>
        </view>
      </view>
    </view>
    <Title title="成员明细" :custom-style="{
      'marginBottom': '32rpx',
      'marginTop': '32rpx',
      'fontSize': '32rpx',
      'fontWeight': '700',
      'color': '#333'
    }"></Title>
    <!-- 明细 -->
    <view v-if="memberList && memberList.length > 0" class="members-container">
      <view
        v-for="item in memberList"
        :key="item.id"
        class="member-item">
        <image
          :src="item.avatar || 'https://qiniu-res.jintianwang.cc/20221105222247-avatar.png'"
          mode="scaleToFill"
          class="avatar"
        />
        <view class="detail">
          <view class="member-name">{{ item.user_name }}</view>
          <view class="detail-item">
            <view class="list-label">佣金数据：</view>
            <view class="total-num">
              <text class="unit">¥</text>
              <text>{{ item.totalEarning }}</text>
            </view>
          </view>
          <view class="detail-item">
            <view class="list-label">注册时间：</view>
            <view class="time">
              <text>{{ item.created_at }}</text>
            </view>
          </view>
          <view class="unbind-content" @click="handleUnLink(item.id, item.user_name, item.source_code)">
            <view class="unbind">
              <image class="un-icon" src="@/static/icon/unlink.png"></image>
              <view>解绑成员</view>
            </view>
          </view>
          <!-- 点击获取联系方式 -->
          <view class="weixin-number" @click="queryMerchantWeixinNumber(item.merchant_id, item.id)">
            <view class="weixin">
              <image class="weixin-icon" src="@/static/icon/weixin.png"></image>
              <view class="weixin-text">联系TA</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else class="empty">
      <image
        style="width: 350rpx;height: 350rpx;"
        src="https://img.alicdn.com/imgextra/i1/1888948409/O1CN01CSQqUP2BzNNzcB96v_!!1888948409.png"
        mode="scaleToFill"
      />
      <view class="empty-tips">
        <text>暂无数据</text>
      </view>
    </view>
    <!-- 选择排序 -->
    <u-picker
      v-model="showSort"
      mode="selector"
      :range="selectorObject"
      range-key="name"
      z-index="90"
      :default-selector="defaultSelector"
      @confirm="changeSort"></u-picker>

    <!-- 弹窗 -->
    <u-popup v-model="contactShow" border-radius="32" mode="center">
			<view class="contact-container">
        <view class="weixin-contact">微信号：{{ merchant_contact_information }}</view>
        <view class="weixin-btn" @click="setClipboardData(merchant_contact_information)">
          一键复制
        </view>
      </view>
		</u-popup>
  </view>
</template>

<script>
  import Title from '@/components/title/title';
  import { memberAndEarningStatistics, unlink, queryMerchantWeixinNumber } from '@/api/artworks';
  export default {
    components: {
      Title
    },
    data() {
      return {
        showSort: false,
        selectorObject: [{
          id: 1,
          name: '按注册时间排序'
        }, {
          id: 2,
          name: '按贡献佣金排序'
        }],
        searchForm: {
          dateType: 'all', // 1 今日 2 昨天 all 全部
          sortType: '2' // 1 按时间排序 2 按佣金大小
        },
        taotalEarning: 0,
        totalMember: 0,
        memberList: [],
        defaultSelector: [ 1 ],
        merchant_contact_information: null,
        contactShow: false
      }
    },
    onLoad(options) {
      this.getMemberAndEarningStatistics();
    },
    methods: {

      // 设置复制
      setClipboardData(text) {
        let that = this;
        uni.setClipboardData({
          data: text,
          success: function () {
            that.contactShow = false;
            uni.showToast({
              title: '复制成功',
              icon: 'none',
              mask: false
            })
          }
        });
      },

      // 获取微信号
      queryMerchantWeixinNumber(merchant_id, user_id) {
        queryMerchantWeixinNumber({ merchant_id, user_id }).then(result => {
          if (result && result.data) {
            this.merchant_contact_information = result.data.merchant_contact_information;
            this.contactShow = true;
          } else {
            uni.showToast({
              title: '暂无联系方式',
              icon: 'none'
            })
          }
        })
      },

      // 解绑成员
      handleUnLink(id, user_name, source_code) {
        let that = this;
        uni.showModal({
          title: '温馨提示',
          confirmColor: '#2979ff',
          content: `是否解绑“${user_name}”该成员？`,
          showCancel: true,
          success: function (res) {
            if (res.confirm) {
              unlink({
                id,
                source_code
              }).then(result => {
                console.log(result)
                if (result && result.code === 200) {
                  that.getMemberAndEarningStatistics();
                }
              })
            } else if (res.cancel) {
                console.log('用户点击取消');
            }
          }
        });
      },

      // 会员和收益统计
      getMemberAndEarningStatistics() {
        uni.showToast({
          title: '加载中...',
          icon: 'loading',
        })
        memberAndEarningStatistics(this.searchForm).then(result => {
          uni.hideToast();
          if (result && result.data) {
            this.taotalEarning = result.data.taotalEarning;
            this.totalMember = result.data.totalMember;
            this.memberList = result.data.memberList;
          }
        }).catch(() => {
          uni.hideToast();
        })
      },

      // 切换
      changeDate(dateType) {
        this.searchForm.dateType = dateType;
        this.getMemberAndEarningStatistics();
      },

      // 切换排序
      changeSort(index) {
        if (index[0] === 1) {
          this.defaultSelector = [ 1 ];
          this.searchForm.sortType = '2';
        } else {
          this.defaultSelector = [ 0 ];
          this.searchForm.sortType = '1';
        }
        this.getMemberAndEarningStatistics();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .team-container{
    padding: 24rpx;
  }
  .header-container{
    background: linear-gradient(-90deg, $uni-color-primary, $uni-color-primary2);
    position: relative;
    width: 100%;
    height: 288rpx;
    opacity: .8;
    z-index: 1;
    padding: 24rpx;
    border-radius: 16rpx;

    .right-bg{
      position: absolute;
      top: 0;
      right: 0;
      width: 40%;
      z-index: -1;
      height: 100%;
      background-size: 100%;
      background-repeat: no-repeat;
      // background-image: url('https://qiniu-res.jintianwang.cc/20221113175255-page-bg.eb3254be.png');
    }

    .search-container{
      display: flex;

      .team-tab{
        flex: 1;
        background: #fff;
        height: 64rpx;
        border-radius: 32rpx;
        margin-right: 24rpx;
        display: flex;
        align-items: center;
        padding: 0 4rpx;
        
        .team-tab-item{
          height: 58rpx;
          background: transparent;
          border-radius: 30rpx;
          font-size: 24rpx;
          color: #333;
          line-height: 58rpx;
          transition: .2s;
          text-align: center;
          padding: 0 24rpx;
          flex: 1;
        }
        .all{
          width: 120rpx;
          padding: 0;
        }
        .active-item{
          color: #fff;
          background: linear-gradient(-90deg, $uni-color-primary, $uni-color-primary2);
        }
      }

      .sort{
        width: 200rpx;
        background: #fff;
        height: 64rpx;
        border-radius: 32rpx;
        font-size: 24rpx;
        line-height: 64rpx;
        text-align: center;
        padding: 0 40rpx 0 24rpx;
        position: relative;

        .arrow-down{
          position: absolute;
          right: 20rpx;
          top: 0;
          bottom: 0;
        }
      }
    }

    .data-container{
      display: flex;
      align-items: center;
      text-align: center;
      margin-top: 40rpx;

      .data-item{
        flex: 1;

        .data-name{
          color: #fff;
          font-size: 28rpx;
        }

        .data-num{
          color: #fff;
          font-size: 44rpx;
          margin-bottom: 12rpx;
          font-weight: bold;
        }
      }

      .data-item:nth-child(1) {
        border-right: 1rpx solid #fff;
      }
    }
  }

  .members-container{
    .member-item{
      display: flex;
      padding: 32rpx 24rpx;
      border-radius: 16rpx;
      box-shadow: 0rpx 1rpx 10rpx 2rpx #d5dcf0;
      align-items: center;
      margin-bottom: 24rpx;
      color: #333;

      .avatar{
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
        margin-right: 24rpx;
        border: 2rpx solid #eaeaea;
      }

      .detail{
        flex: 1;
        padding-top: 16rpx;
        position: relative;

        .member-name{
          font-size: 28rpx;
          font-weight: bold;
          margin-bottom: 16rpx;
        }
        
        .detail-item{
          margin-bottom: 16rpx;
          font-size: 24rpx;
        }

        .detail-item{
          display: flex;
          font-size: 24rpx;
        }
        
        .list-label{
          color: #888;
        }

        .unit{
          font-size: 24rpx;
          margin-right: 4rpx;
        }

        .total-num{
          color: rgb(239, 34, 34);
          font-weight: bold;
        }

        .time{
          color: #333;
        }

        .weixin-number{
          position: absolute;
          top: -32rpx;
          right: -24rpx;
          width: 180rpx;
          height: 54rpx;
          border-radius: 0 16rpx 0 16rpx;
          background-color: #d5dcf0;
          color: #999;
        }

        .unbind-content{
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          width: 180rpx;
          height: 54rpx;
          border-radius: 27rpx;
          background-color: #e6e6e6;
          margin: auto;
          color: #999;
        }

        .unbind,
        .weixin{
          font-size: 24rpx;
          display: flex;
          align-items: center;
          justify-items: center;
          width: 180rpx;
          height: 54rpx;
          padding: 0 24rpx;
          
          .un-icon{
            width: 28rpx;
            height: 28rpx;
            margin-right: 6rpx;
          }

          .weixin-icon{
            width: 46rpx;
            height: 46rpx;
            margin-right: 6rpx;
          }

          .weixin-text{
            font-weight: bold;
            color: $uni-color-primary;
          }
        }
      }
    }
  }
  .empty{
    text-align: center;
  }

  .contact-container{
    padding: 32rpx 48rpx;
    text-align: center;
    width: 500rpx;

    .weixin-contact{
      font-size: 32rpx;
      color: #333;
      margin-bottom: 48rpx;
    }

    .weixin-btn{
      width: 100%;
      height: 68rpx;
      line-height: 68rpx;
      border-radius: 34rpx;
      background-color: $uni-color-primary;
      color: #fff;
    }
  }
</style>
